<template>
  <div>
    <div class="left">
      <div class="title">
        <span class="word">管理员信息</span>
      </div>
      <div class="line"></div>
      <div class="middle">
        <div class="mtop">
          <div>基础信息</div>
          <el-button @click="dialogFormVisible = true">修改</el-button>
        </div>
        <div class="admin">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple" />
              <span>姓名:{{ xinxi.user.adminName }}</span>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple" />
              <span>邮箱:{{ xinxi.user.adminEmail }}</span>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple" />
              <span>手机:{{ xinxi.user.adminTel }}</span>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple" />
              <span>密码:***********</span>
            </el-col>
          </el-row>
        </div>
        <div class="line2"></div>
        <div class="bottom">
          <div class="Btop">
            <div>管理的项目</div>
          </div>
          <div class="table">
            <el-table :data="
              xinxi.tableData.slice(
                (pageCount - 1) * pageSize,
                pageCount * pageSize
              )
            ">
              <el-table-column prop="projectName" label="项目名称" align="center" />
              <el-table-column prop="city" label="城市" align="center" />
              <el-table-column prop="functions" label="功能" align="center" />
              <el-table-column prop="onlineTime" label="上线时间" align="center" />
            </el-table>
            <div class="page">
              <div class="example-pagination-block">
                <el-pagination layout="prev, pager, next" :total="xinxi.tableData.length" :page-size="pageSize"
                  v-model:current-page="pageCount" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 修改弹出框 -->
  <div class="dialog userDialog">
    <el-dialog v-model="dialogFormVisible" width="23%" title="基础信息">
      <div class="line3"></div>
      <div v-if="!imgflag" @mouseover="mouseover" class="userimg">
        <img :src="xinxi.form.headportrait" alt="" srcset="" />
      </div>
      <div v-else class="userimg1" @mouseleave="mouseleave">
        <div class="mask">
          <el-upload class="avatar-uploader" action="http://139.224.69.209:9677/OaDeviceController/uploads"
            :show-file-list="false" ref="uploadRef" :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img src="../../../../public/img/upload1.png" alt="" />
          </el-upload>
        </div>
        <img :src="xinxi.form.headportrait" alt="" srcset="" />
      </div>
      <el-form :model="xinxi.form" :rules="rules" ref="Cform">
        <el-form-item label="姓名" prop="adminName" :label-width="formLabelWidth">
          <el-input v-model="xinxi.form.adminName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱" prop="adminEmail" :label-width="formLabelWidth">
          <el-input v-model="xinxi.form.adminEmail" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号" prop="adminTel" :label-width="formLabelWidth">
          <el-input v-model="xinxi.form.adminTel" autocomplete="off" />
        </el-form-item>
        <div class="pwd" v-if="cpwd == true">
          <el-form-item prop="y_pwd" label="原密码" :label-width="formLabelWidth">
            <el-input v-model="xinxi.form.y_pwd" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item label="新密码" prop="n_pwd" :label-width="formLabelWidth">
            <el-input v-model="xinxi.form.n_pwd" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPwd" :label-width="formLabelWidth">
            <el-input v-model="confirmPwd" type="password" autocomplete="off" />
          </el-form-item>
        </div>
        <div v-if="cpwd == false">
          <el-form-item label="密码" :label-width="formLabelWidth">
            <span>*********</span>
            <div>
              <el-button type="text" style="align-items: end" class="chpwd" @click="changePwd">更改密码</el-button>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <div class="line"></div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="(dialogFormVisible = false), (cpwd = false)" class="cancel">取消</el-button>
          <el-button type="primary" @click="updateadminuser(Cform)" class="save">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { regionData } from "element-china-area-data";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { UserInfo, UserInfoUpdate, getProjectInfo } from "@/api/model/login";
import { onMounted, reactive, ref } from "vue";
const Cform = ref(null);
const uploadRef = ref(false);
const formLabelWidth = ref(100);
const pageCount = ref(1);
const pageSize = ref(3);
const confirmPwd = ref("");
// const value1 = ref('')
const cpwd = ref(false);
const imgflag = ref(false);

const router = useRouter();
const dialogFormVisible = ref(false);
// const value = ref('')

const xinxi = reactive({
  options: regionData,
  selectedOptions: [],
  user: {},
  form: {},
  tableData: [],
  addproject: {
    city: "",
  },
  editproject: {},
});

const validateEmail = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入邮箱"));
  } else {
    if (
      /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(
        xinxi.form.adminEmail
      )
    ) {
      callback();
    }
    callback(new Error("请输入正确的邮箱"));
  }
};
const validateTel = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入手机号"));
  } else {
    if (
      /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
        xinxi.form.adminTel
      )
    ) {
      callback();
    }
    callback(new Error("请输入正确的手机号"));
  }
};
const validatePwd = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请再次输入新密码"));
  } else {
    if (confirmPwd.value === xinxi.form.n_pwd) {
      callback();
    }
    callback(new Error("两次密码输入不一致"));
  }
};
const rules = reactive({
  adminName: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  adminEmail: [
    {
      validator: validateEmail,
      trigger: "blur",
    },
  ],
  adminTel: [
    {
      validator: validateTel,
      trigger: "blur",
    },
  ],
  y_pwd: [{ required: true, message: "原密码不能为空", trigger: "blur" }],
  n_pwd: [{ required: true, message: "新密码不能为空", trigger: "blur" }],
  confirmPwd: [
    {
      validator: validatePwd,
      trigger: "blur",
    },
  ],
});
onMounted(() => {
  getxinxiData();
  getprojectData();
});

function changePwd() {
  cpwd.value = true;
}

const mouseover = () => {
  imgflag.value = !imgflag.value;
  console.log(1111111111111);
};
const mouseleave = () => {
  imgflag.value = !imgflag.value;
  console.log(222222222222222);
};
const updateadminuser = (formEl) => {
  formEl.validate(async (valid) => {
    console.log(valid, 4444444444);
    if (valid) {
      let { data: res } = await UserInfoUpdate({
        ...xinxi.form,
        adminPwd: xinxi.form.n_pwd,
      });
      console.log("UserInfoUpdate", res);
      dialogFormVisible.value = false;
      if (res.code == 200) {
        // 回到登录页
        if (cpwd.value) {
          ElMessage({
            message: "修改成功请重新登录",
            type: "success",
          });
          localStorage.clear();
          router.replace({ path: "/login" });
          return false;
        }
        ElMessage({
          message: "修改成功",
          type: "success",
        });
      }
    } else {
      dialogFormVisible.value = false;
      return false;
    }
  });
};
const handleAvatarSuccess = (res) => {
  console.log(res);
  xinxi.form.headportrait = res.date.url;
};
const getxinxiData = async () => {
  // let { data } = await UserInfo();
  let { data } = await UserInfo({
    adminId: window.localStorage.getItem("USER_ID"),
  });
  let res = data.data.list[0];
  console.log(data, 333);
  if (res) {
    xinxi.user = res;
    xinxi.form = res;
    let { data: res1 } = await getProjectInfo();
    console.log("getProjectInfo", res1);
    console.log(xinxi.user, "xinxi.user");
    xinxi.tableData = res1.data.list.filter((item) => {
      // console.log(xinxi.user.projectId.split(",").includes(String(item.projectId)));
      if (xinxi.user.projectId) {
        return xinxi.user.projectId.split(",").includes(String(item.projectId));
      }
    });
    console.log(xinxi.tableData, "xinxi.tableData");
  }
};
const getprojectData = async () => { };
</script>

<style scoped lang="less">
.pwd {
  height: 50%;
}

.smbtn {
  width: 80px;
  height: 30px;
}

.userDialog {
  :deep(.el-dialog__title) {
    color: rgb(81, 99, 167);
    font-size: 19px;
  }

  :deep(.el-dialog__close) {
    font-size: 27px !important;
    color: rgb(81, 99, 167);
  }

  :deep(.el-dialog__body) {
    padding: 20px 0 20px;
  }
}

.left {
  background-color: white;

  border-style: none;
  border-color: unset;
  box-shadow: rgb(77 98 165 / 10%) 0px 5px 20px 0px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
  font-style: normal;

  .title {
    padding: 20px;

    .word {
      font-family: SourceHanSansSC;
      font-weight: 550;
      font-size: 20px;
      color: rgb(77, 98, 165);
      font-style: normal;
      letter-spacing: 2px;
      line-height: 28px;
      text-decoration: none;
    }
  }

  .line {
    border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
  }

  .middle {
    padding: 20px;
    width: 100%;
    font-family: SourceHanSansSC;
    font-weight: 400;
    font-size: 16px;
    color: rgb(127, 127, 127);
    font-style: normal;
    letter-spacing: 0px;
    line-height: 22px;
    text-decoration: none;

    .mtop {
      display: flex;
      justify-content: space-between;

      .el-button {
        width: 104px;
        height: 30px;
        z-index: 698;
        background-color: rgb(147, 170, 222);
        color: white;
      }
    }

    .line2 {
      width: 100%;
      padding-left: 40px;
      padding-right: 40px;
      border-bottom: dashed rgb(220, 224, 238) 1px;
      height: 1px;
      margin: auto;
      margin: 30px 0px 30px 0px;
    }
  }

  .bottom {
    .Btop {
      display: flex;
      justify-content: space-between;
      padding: 10px 0px 10px 0px;

      .el-button {
        width: 104px;
        height: 30px;
        z-index: 698;
        background-color: rgb(147, 170, 222);
        color: white;
      }
    }

    .table {
      height: 560px;

      .el-button {
        width: 80px;
        height: 30px;
        background-color: rgb(143, 170, 220);
        border-style: none;
        border-color: unset;
        border-radius: 4px;
        font-size: 14px;
        padding: 0px;
        text-align: center;
        line-height: 20px;
        font-weight: normal;
        font-style: normal;
      }
    }

    .page {
      display: flex;
      justify-content: flex-end;
      margin-top: 2.25rem;
    }
  }
}

.dialog {
  .el-form {
    width: 246px;
    border-style: none;
    border-color: unset;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    font-weight: normal;
    font-style: normal;
    padding-top: 20px;
    margin-left: 20px;
  }

  /deep/.el-input__inner {
    -webkit-appearance: none;
    background-color: var(--el-input-bg-color, var(--el-color-white));
    background-image: none;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    border: var(--el-input-border, var(--el-border-base));
    box-sizing: border-box;
    color: var(--el-input-text-color, var(--el-text-color-regular));
    display: inline-block;
    font-size: inherit;
    height: 30px;
    line-height: 32px;
    outline: 0;
    padding: 0 11px;
    transition: var(--el-transition-border);
    width: 200px;
  }

  .userimg {
    .mask {
      // margin-top: 20px;
      position: absolute;
      top: 20px;
      background-color: rgba(0, 0, 0, 0.3);
    }

    img {
      width: 55px;
      height: 55px;
      border-radius: 100%;
    }

    // padding-top: 30px;
    margin: auto;
    width: 55px;
    height: 55px;
    border-radius: 100%;

    background-color: thistle;
    position: relative;
    // top: 20px;

    /* 而是显示元素 */
  }

  .userimg1 {
    background-color: rgba(27, 109, 204, 0.7);

    .qwe {
      margin-left: 15px;
    }

    .mask {
      font-size: 12px;
      width: 55px;
      height: 55px;
      border-radius: 100%;
      // background-color: rgba(27, 109, 204, 0.7);
      // margin-top: 20px;
      position: absolute;
      top: 20px;
      margin-bottom: 10px;

      img {
        width: 45px;
        height: 45px;
        position: absolute;
        top: -18px;
        left: 6px;
      }
    }

    img {
      width: 55px;
      height: 55px;
      border-radius: 100%;
    }

    // padding-top: 30px;
    margin: 0 auto;
    width: 55px;
    height: 55px;
    border-radius: 100%;

    background-color: thistle;
    position: relative;
    // top: 20px;

    /* 而是显示元素 */
  }

  /deep/ .el-form-item__label {
    font-family: SourceHanSansSC;
    font-weight: 400;
    font-size: 14px;
    color: rgb(127, 127, 127);
    font-style: normal;
    letter-spacing: 0px;
    line-height: 20px;
    text-decoration: none;
    padding-right: 30px;
  }
}

.dialogs {
  /deep/.el-dialog {
    --el-dialog-width: 410px;
    --el-dialog-margin-top: 15vh;
    --el-dialog-bg-color: var(--el-color-white);
    --el-dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --el-dialog-title-font-size: var(--el-font-size-large);
    --el-dialog-content-font-size: 14px;
    --el-dialog-font-line-height: var(--el-font-line-height-primary);
    --el-dialog-padding-primary: 20px;
    position: relative;
    margin: var(--el-dialog-margin-top, 15vh) auto 50px;
    background: var(--el-dialog-bg-color);
    border-radius: 8px;
    box-shadow: var(--el-dialog-box-shadow);
    box-sizing: border-box;
    width: var(--el-dialog-width, 410px);
  }

  /deep/.line4 {
    border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
  }

  /deep/.el-input {
    width: 200px;
  }

  .el-form {
    width: 246px;
    border-style: none;
    border-color: unset;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    font-weight: normal;
    font-style: normal;
    padding-top: 20px;
    margin-left: 40px;
  }

  /deep/.el-input__inner {
    left: 870px;
    top: 428px;
    height: 30px;
    border-radius: 4px;
    color: rgba(204, 204, 204, 100);
    font-size: 14px;
    text-align: left;
    font-family: Microsoft Yahei;
    border: 1px solid rgba(204, 204, 204, 100);
    line-height: 32px;
    outline: 0;
    padding: 0 11px;
    transition: var(--el-transition-border);
    width: 250px;
  }

  .userimg {
    padding-top: 30px;
    margin: auto;
    width: 55px;
    height: 55px;
    border-radius: 100%;
    background-color: thistle;
  }

  /deep/ .el-form-item__label {
    left: 790px;
    top: 433px;
    width: 57px;
    height: 20px;
    color: rgba(127, 127, 127, 100);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
  }
}

.chpwd {
  margin-left: 50px;
  left: 1037px;
  top: 633px;
  width: 56px;
  height: 20px;
  color: rgba(77, 98, 165, 100);
  font-size: 14px;
  text-align: left;
  font-family: SourceHanSansSC-regular;

  /deep/ span {
    color: #4d62a5 !important;
    display: inline-flex;
    align-items: center;
  }
}

.line3 {
  border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
  margin-bottom: 30px;
}

.cancel {
  left: 917px;
  top: 696px;
  width: 80px;
  height: 30px;
  line-height: 20px;
  border-radius: 4px;
  background-color: rgba(204, 204, 204, 100);
  text-align: center;
  border: none;
}

.save {
  left: 1013px;
  top: 696px;
  width: 80px;
  height: 30px;
  line-height: 20px;
  border-radius: 4px;
  background-color: rgba(143, 170, 220, 100);
  text-align: center;
  border: none;
}
</style>
<style scoped lang="less">
/deep/.el-dialog {
  --el-dialog-width: 346px;
  --el-dialog-margin-top: 15vh;
  --el-dialog-bg-color: var(--el-color-white);
  --el-dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --el-dialog-title-font-size: var(--el-font-size-large);
  --el-dialog-content-font-size: 14px;
  --el-dialog-font-line-height: var(--el-font-line-height-primary);
  --el-dialog-padding-primary: 20px;
  position: relative;
  margin: var(--el-dialog-margin-top, 15vh) auto 50px;
  background: var(--el-dialog-bg-color);
  border-radius: var(--el-border-radius-small);
  box-shadow: var(--el-dialog-box-shadow);
  box-sizing: border-box;
  width: var(--el-dialog-width, 346px);
}

/deep/.el-table tr {
  background-color: rgb(246, 250, 255);
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: white 4px solid !important;
}

.example-pagination-block+.example-pagination-block {
  margin-top: 10px;
}

.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}

/deep/.el-button>span {
  color: white;
  display: inline-flex;
  align-items: center;
}
</style>
